<template>
  <div class="collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item class="collapse-item" title="Consistency" name="1">
        <template v-for="item in baseCpnsConfig.list" :key="item.type">
          <el-button
            draggable="true"
            class="collapse-item-button"
            size="40"
            :icon="item.icon"
            >{{ item.label }}</el-button
          >
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import baseCpnsConfig from '../data/base-cpns.config'

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>

<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0px;
  margin-bottom: 4px;
}

::deep .el-collapse-item__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collapse {
  .collapse-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .collapse-item-button {
      width: 118px;
      margin: 0px;
      margin-bottom: 4px;
    }
  }
}
</style>
